<template>
    <div class="search_list">
        <good-list v-if="list.length > 0" :list="list"></good-list>
        <div class="tip" v-else>
            没有您要搜索的内容 <button @click="$router.back()">返回</button>
        </div>
    </div>
</template>
<script>
    import goodList from "@/components/GoodList";
    import { getSearch } from '@/tools/ajax'
    export default {
        name: "Search",
        data() {
            return {
                list: []
            }
        },
        components: {
            goodList
        },
        created() {
            console.log("初始化搜索页,第一次展示")
            // this.$route.query.key 拿到首页输入的值
            getSearch({ word: this.$route.query.key }).then(res => {
                this.list = res;
            })
        },
        beforeRouteUpdate(to, from, next) {
            // 路由跳转前后的对应的组件相同(路由切换前后,路由path相同)时,会执行路由更新这个生命周期函数,  如当前是搜索页,点击按钮仍然跳转到搜索页
            console.log("路由更新", this.$route , from, to)
            // 当此页面路由更新时,通过路由中的关键字重新搜索商品,进行展示
            getSearch({ word: to.query.key }).then(res => {
                this.list = res;
            })
            next();
        }
    }
</script>
<style scoped>
    .search_list{
        padding-bottom: 30px;
    }
    .tip {
        line-height: 500px;
        text-align: center;
    }
</style>